<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <style>
            html,body{
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            .capaPrincipal{
                width: 100%;
                height: 100%;
            }
            .capaIzquierda{
                float: left;
                height: 100%;
                width: 93%;
            }
            .capaDerecha{
                float: right;
                height: 100%;
                width: 7%;
                font-weight: bold;
            }
            .detalleMesa{
                width: 260px;
                float: left;
                margin: 5px;
            }
            .encabezadoDetalleMesa{
                height: 58px;
                margin: 2px;
                font-weight: bold;
            }
            .detallePedido{
                height: 150px;
                background: #F3F781;
                overflow: auto;
            }
            .alinearIz{
                float: left;
                width: 194px;
                background: #E6E6E6;
                border: 2px solid #CCCCCC;
                font-family: sans-serif;
            }
            .alinearDer{
                float: right;
                width: 50px;
                height: 52px;
                border: 2px solid #CCCCCC;
            }
            .enPreparacion{
                height: 50px;
                width: 100%;
                background: #6cd858;
            }
            .despacho{
                height: 50px;
                width: 100%;
                background: tomato;
            }
            .pedidosMesa{

                height: 50px;
                width: 100%;
                background: #F3F781;
            }
            .ocultarAnulados{

                height: 50px;
                width: 100%;
                background: orangered;
            }
            .cerrar{
                height: 50px;
                width: 100%;
                background: red;
            }
            .capaDerechaSuperior, .capaDerechaMedio, .capaDerechaInferior{
                width: 95%;
            }
        </style>
    </head>
    <body>
        <div class="capaPrincipal">
            <div class="capaIzquierda">
                <div align="center" class="">
                    <div class="detalleMesa" align="center">
                        <div class="encabezadoDetalleMesa">
                            <div class="alinearIz">
                                <table align="center">
                                    <tr>
                                        <td><label style="color: #CE2828; font-weight: bolder; font-family:sans-serif; font-size: large">MESA 17</label></td>
                                        <td>&nbsp&nbsp&nbsp</td>
                                        <td>MOSO: 9</td>
                                    </tr>
                                    <tr>
                                        <td>(22:19:32)</td>
                                        <td>&nbsp&nbsp&nbsp</td>
                                        <td><label style="color: #9B3636; font-size: 14px;">8 minutos</label></td>
                                    </tr>
                                </table>
                            </div>
                            <div class="alinearDer">
                                <center><label style="font-size: xx-large; font-weight: bolder; color: #CCCCCC; margin-top: 50px; line-height: 150%;">1</label></center>
                            </div>
                        </div>
                        <div class="detallePedido">
                            <table align="center" border="1" style="border-collapse: collapse">
                                <thead style=" font-size: 12px; font-weight: bold; background: #008c00">
                                    <tr>
                                        <td width="240"><center>PLATO</center></td>
                                        <td><center>Cant.</center></td>
                                    </tr>
                                </thead>
                                <tbody style="background: #6cd858">
                                    <tr>
                                        <td>LOMO SALTADO</td>
                                        <td><center>5</center></td>
                                    </tr>
                                    <tr>
                                        <td>TALLARINES VERDES</td>
                                        <td><center>2.</center></td>
                                    </tr>
                                    <tr>
                                        <td>MILANESA</td>
                                        <td><center>3</center></td>
                                    </tr>
                                    <tr>
                                        <td>LOMO SALTADO</td>
                                        <td><center>5</center></td>
                                    </tr>
                                    <tr>
                                        <td>TALLARINES VERDES</td>
                                        <td><center>2.</center></td>
                                    </tr>
                                    <tr>
                                        <td>MILANESA</td>
                                        <td><center>3</center></td>
                                    </tr>
                                    <tr>
                                        <td>LOMO SALTADO</td>
                                        <td><center>5</center></td>
                                    </tr>
                                    <tr>
                                        <td>TALLARINES VERDES</td>
                                        <td><center>2.</center></td>
                                    </tr>
                                    <tr>
                                        <td>MILANESA</td>
                                        <td><center>3</center></td>
                                    </tr>
                                    <tr>
                                        <td>LOMO SALTADO</td>
                                        <td><center>5</center></td>
                                    </tr>
                                    <tr>
                                        <td>TALLARINES VERDES</td>
                                        <td><center>2.</center></td>
                                    </tr>
                                    <tr>
                                        <td>MILANESA</td>
                                        <td><center>3</center></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="detalleMesa" align="center">
                        <div class="encabezadoDetalleMesa">
                            <div class="alinearIz">
                                <table align="center">
                                    <tr>
                                        <td><label style="color: #CE2828; font-weight: bolder; font-family:sans-serif; font-size: large">MESA 17</label></td>
                                        <td>&nbsp&nbsp&nbsp</td>
                                        <td>MOSO: 9</td>
                                    </tr>
                                    <tr>
                                        <td>(22:19:32)</td>
                                        <td>&nbsp&nbsp&nbsp</td>
                                        <td><label style="color: #9B3636; font-size: 14px;">8 minutos</label></td>
                                    </tr>
                                </table>
                            </div>
                            <div class="alinearDer">
                                <center><label style="font-size: xx-large; font-weight: bolder; color: #CCCCCC; margin-top: 50px; line-height: 150%;">1</label></center>
                            </div>
                        </div>
                        <div class="detallePedido">
                            <table align="center" border="1" style="border-collapse: collapse">
                                <thead style=" font-size: 12px; font-weight: bold; background: #008c00">
                                    <tr>
                                        <td width="240"><center>PLATO</center></td>
                                        <td><center>Cant.</center></td>
                                    </tr>
                                </thead>
                                <tbody style="background: #6cd858">
                                    <tr>
                                        <td>LOMO SALTADO</td>
                                        <td><center>5</center></td>
                                    </tr>
                                    <tr>
                                        <td>TALLARINES VERDES</td>
                                        <td><center>2.</center></td>
                                    </tr>
                                    <tr>
                                        <td>MILANESA</td>
                                        <td><center>3</center></td>
                                    </tr>
                                    <tr>
                                        <td>LOMO SALTADO</td>
                                        <td><center>5</center></td>
                                    </tr>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                </div>    
            </div>
            <div class="capaDerecha">
                <div class="capaDerechaSuperior">
                    <div align="center"><label style="color: #00529B; font-size: 19px">12:40:41</label></div>
                    <div><button class="enPreparacion">En Preparacion</button></div>
                    <div><button class="despacho">Despacho</button></div>
                    <div><button class="pedidosMesa">Pedidos de Mesa</button></div>
                </div>
                <div class="capaDerechaMedio">
                    <div align="center">Página</div>
                    <div><center><label style="font-size: xx-large;">1</label></center></div>
                    <div>
                        <center>
                        <button><-</button>
                        <button>-></button>
                        </center>
                    </div>
                </div>
                <div class="capaDerechaInferior">
                    <div><button class="ocultarAnulados">Ocultar Anulados</button></div>
                    <div><button class="cerrar">Cerrar</button></div>
                </div>
            </div>
        </div>
    </body>
</html>
